<template>
    <div>
        <div class="head">
            <div class="time">{{nowDateTime}}</div>
            <div class="logo"><img src="../../static/images/logo.png"></div>
        </div>
        <!-- 导航-->
        <div class="nav-bg">
            <div class="nav">
                <ul>
                    <li @click="toIndex" style="cursor: pointer">网站首页</li>
                    <li v-for="(item) in indexNavigate" @click="navigateToList(item.id)"
                        :class=" categoryId == item.id ? 'active' : 'unactive' " class="movehover" target="_blank">
                        {{ item.title }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">

import request from "@/utils/request"

export default {
    name: 'headTemplate',
    data() {
        return {
            nowDateTime:'',
            active: '',
            categoryId: 0,
            indexNavigate: []
        }
    },
    watch: {
        $route: {
            handler() {
                this.categoryId = this.$route.query.categoryId;
                if ( this.categoryId != undefined ) {
                    this.navigateToList(this.categoryId)
                }
            },
            deep: true
        }
    },
    created() {
        this.categoryId = this.$route.query.categoryId;
        this.getIndexIndexCategory();
        this.currentTime()
    },
    methods: {
        getTime(){
            let year = new Date().getFullYear();
            let month =new Date().getMonth() + 1 < 10? "0" + (new Date().getMonth() + 1): new Date().getMonth() + 1;
            let date =new Date().getDate() < 10? "0" + new Date().getDate(): new Date().getDate();
            let hh =new Date().getHours() < 10? "0" + new Date().getHours(): new Date().getHours();
            let mm =new Date().getMinutes() < 10? "0" + new Date().getMinutes(): new Date().getMinutes();
            let ss =new Date().getSeconds() < 10? "0" + new Date().getSeconds(): new Date().getSeconds();
            let week = new Date().getDay();
            let weeks = ["日","一","二","三","四","五","六"];
            let getWeek = "星期" + weeks[week];
            this.nowDateTime = year + "年" + month + "月" + date +"日"+" "+hh+":"+mm+':'+ss+getWeek;
        },
        currentTime(){
            let _this = this;
            setInterval(_this.getTime,500)
       },
        getIndexIndexCategory() {
            request({
                url: '/business/getCategoriesByPosition/1',
                method: 'get'
            }).then((res) => {
                this.indexNavigate = res.data.data
            })
        },
        toIndex() {
            this.$router.push({
                path: '/'
            })
        },
        navigateToList(id) {
            if (id == '1406968425636429824') {
                let newR = this.$router.resolve({
                    path: '/video', query: {
                        categoryId: id
                    }
                })
                window.open(newR.href,'_blank')
            }else{
                let newR = this.$router.resolve({
                    path: '/list', query: {
                        categoryId: id
                    }
                })
                window.open(newR.href,'_blank')
            }
        }
        }
    }
</script>
<style scoped>
.active {
    color: #fff600;
}

.unactive {
    color: #FFFFFF;
}
</style>
